<template>
    <NDrawer v-model:show="visible" width="80%" placement="right">
        <NDrawerContent title="审核">
            <NDescriptions title="基础信息" label-placement="left">
                <NDescriptionsItem>
                    <template #label>UID</template>
                    {{ detail?.uid }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>手机号</template>
                    {{ detail?.mobileNumber }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>邮箱</template>
                    {{ detail?.email }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>邀请码</template>
                    {{ detail?.inviteCode }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>申请时间</template>
                    {{ detail?._createdAt }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>推荐人</template>
                    {{ detail?.referrer }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>卡号</template>
                    {{ detail?.cardNumber }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>卡余额</template>
                    {{ detail?.available }} HKD
                </NDescriptionsItem>
            </NDescriptions>
            <NDivider />
            <NDescriptions title="付款信息" label-placement="left">
                <NDescriptionsItem>
                    <template #label>状态</template>
                    {{ detail?.paymentStatus === 1 ? '已支付' : '绑定卡' }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>付款金额</template>
                    {{ detail?.paymentAmount }}
                </NDescriptionsItem>
            </NDescriptions>
            <NDivider />
            <NDescriptions title="操作" label-placement="top" :column="1">
                <NDescriptionsItem>
                    <NImage v-if="detail?.cardImage" :src="detail.cardImage" :width="100"></NImage>
                </NDescriptionsItem>
                <NDescriptionsItem >
                    <template #label>状态</template>

                    <NTag v-if="detail?.cardStatus === 3" size="small" type="success"> 成功 </NTag>
                    <NTag v-if="detail?.cardStatus === 5" size="small" type="error">禁用</NTag>

                    <NSwitch
                        class="ml-2"
                        v-model:value="status"
                        size="small"
                        :unchecked-value="5"
                        :checked-value="3"
                        :loading="statusLoading"
                        @update:value="handleStatusUpdate"
                    />
                </NDescriptionsItem>
            </NDescriptions>
        </NDrawerContent>
    </NDrawer>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useMessage } from 'naive-ui'
import { queryTransferCardDetail, updateTransferCardStatus } from '@/api/card'
import dayjs from 'dayjs'

defineOptions({
    name: 'DetailDrawer'
})

const props = defineProps<{
    id: number | undefined
}>()
const emits = defineEmits<{
    refresh: []
}>()

const visible = defineModel<boolean>({
    required: true
})

const message = useMessage()

const detail = ref<Api.Card.TransferCardDetail | null>(null)
const queryDetail = async () => {
    if (!props.id) return
    const [err, res] = await queryTransferCardDetail(props.id)
    if (!err && res) {
        res._createdAt = dayjs(res.createdAt * 1000).format('YYYY-MM-DD')
        detail.value = res
    }
}

watch(visible, newVal => {
    if (newVal) {
        queryDetail()
    }
})

const statusLoading = ref(false)
const status = ref<Api.User.UserDetail['status']>(1)
const handleStatusUpdate = async (value: Api.Card.TransferCardDetail['cardStatus']) => {
    statusLoading.value = true
    const [err, res] = await updateTransferCardStatus(props.id!, value)
    statusLoading.value = false
    if (!err && res) {
        message.success('状态更新成功')
        queryDetail()
        emits('refresh')
    }
}
</script>
